<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        button{
            width: 100%;
            height: 30px;
            margin-bottom: 10px;
        }
        body{
            text-align: center;
            padding: 30px;
        }
        #box{
            margin-bottom: 30px ;
        }
    </style>
</head>
<body>
    <div id="box" style="display: flex; justify-content: space-around">
        <fieldset>
            <legend>注册</legend>
            <table>
                <tr>
                    <td>
                        名字 :
                    </td>
                    <td>
                        <input id="regist-name" type="text">
                    </td>
                </tr>
                <tr>
                    <td>
                        用户 :
                    </td>
                    <td>
                        <input id="account" type="text">
                    </td>
                </tr>
                <tr>
                    <td>
                        密码 :
                    </td>
                    <td>
                        <input id="regist-pwd" type="password">
                    </td>
                </tr>
                <tr>
                    <td colspan="2"> <!--占两行-->
                        <button id="regist-btn">注册</button>
                    </td>

                </tr>
            </table>
        </fieldset>
        <fieldset>
            <legend>登录</legend>
            <table>
                <tr>
                    <td>
                        名字 :
                    </td>
                    <td>
                        <input id="login-name" type="text">
                    </td>
                </tr>
                <tr>
                    <td>
                        密码 :
                    </td>
                    <td>
                        <input id="login-pwd" type="password">
                    </td>
                </tr>
                <tr>
                    <td>
                        <img src="https://www.baidu.com/img/dong_66cae51456b9983a890610875e89183c.gif" onclick="javascript:this.setAttribute('src','http://localhost:3000/users/getCaptcha?v='+ new Date().getTime()+'&token='+ window.localStorage.getItem('token'))">
                    </td>
                    <td>
                        <input id="captcha" type="text">
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <button id="login-btn">登录</button>
                    </td>

                </tr>
            </table>
        </fieldset>
    </div>
    <div>
        <button onclick="getUserInfo(this)">
            获取用户信息
        </button>
        <div class="msg"></div>
        <button onclick="getCookieMsg(this)">
            获取cookie信息
        </button>
        <div class="getCookieMsg"></div>
    </div>
    <div>

        <button onclick="captchaValid(this)">验证</button>
    </div>
</body>
<script src="jquery-2.2.3.min.js"></script>
<script>

    $(function () {
        $("#regist-btn").on("click", function () {
            regist()
        })

        $("#login-btn").on("click", function () {
            login()
        })

    })

    var future= {}

    future.burl = "http://localhost:3000"

    future.ajax= function (option) {
        $.ajax({

            url: future.burl + option.url,
            type: option.type || "post",
            data: option.data,
            async: option.async || false,
            success: function (result) {
                if (option.success) {
                    option.success(result)
                }
            },
            error: function (error) {
                if (option.error) {
                    option.error(error)
                } else {
                    alert(error.responseText)
                }
            }
        })
    }

    //注册
    function regist(){
        future.ajax({
            url:"/users/regist",
            type: "post",
            data: {
                name:$('#regist-name').val(),
                pwd :$('#regist-pwd').val(),
                account:$('#account').val()
            },
            success:function (result) {
                alert(result)
            }
        })
    }

    //登录
    function login(){
        future.ajax({
            url:"/users/login",
            type:"get",
            data: {
                name:$('#login-name').val(),
                pwd :$('#login-pwd').val(),
                captcha : $("#captcha").val()
            },
            success:function (result) {
                alert("登录成功 ,拿到token")
                window.localStorage.setItem("token",result)
            }

        })
    }

    //获取用户信息
    function getUserInfo(obj) {
        future.ajax({
            url:'/users/getUserInfo/',
            type:'get',
            success: function (result) {
                $(".msg").text(JSON.stringify(result))
            }
        })
    }
    // 获取cookie的key和val值 给服务端发送请求
    function getCookieMsg(obj) {
        future.ajax({
            url:'/users/getCookieMsg/',
            type:'get',
            success: function (result) {
                $(".getCookieMsg").text("cookieKey : " + result.cookieKey  + " cookieVal : "+ getCookie(result.cookieKey))
            }
        })
    }


    //获取cookie信息

    // /**
    //  * 设置cookie
    //  */
    function setCookie(name, value, seconds) {
        seconds = seconds || 0;   //conds有值就直接赋值，没有为0，这个根php不一样。
        var expires = "";
        // cookies随浏览器关闭而失效的方法:
        //     如果不设置Expires的属性那么Cookie的存活时间就是在关闭浏览器的时候。
        if (seconds != 0 ) {      //设置cookie生存时间
            var date = new Date();
            date.setTime(date.getTime()+(seconds*1000));
            expires = "; expires="+date.toGMTString();
        }
        document.cookie = name+"="+escape(value)+expires+"; path=/";   //转码并赋值
    }

    // /**
    //  * 读取cookie
    //  */
    function getCookie(name) {
        var nameEQ = name + '='
        var ca = document.cookie.split(';') // 把cookie分割成组
        for (var i = 0; i < ca.length; i++) {
            var c = ca[i] // 取得字符串
            while (c.charAt(0) == ' ') { // 判断一下字符串有没有前导空格
                c = c.substring(1, c.length) // 有的话，从第二位开始取
            }
            if (c.indexOf(nameEQ) == 0) { // 如果含有我们要的name
                return unescape(c.substring(nameEQ.length, c.length)) // 解码并截取我们要值
            }
        }
        return false
    }

    // /**
    //  * 检查cookie
    //  * @param c_name
    //  * @return {boolean}
    //  */
    function checkCookie(c_name) {
        username = getCookie(c_name);
        console.log(username);
        if (username != null && username != "") {
            return true;
        }
        else {
            return false;
        }
    }

    // /**
    //  * 清除cookie
    //  * @param name
    //  */
    function clearCookie(name) {
        setCookie(name, "", -1);
    }

    function captchaValid(obj) {
        future.ajax({
            url:"/users/captchaValid",
            type :"get",
            data:{
                captcha : $("#captcha").val()
            },
            success: function (result) {
                alert(result)
            }

        })
    }


</script>
</html>


